function getDate(url) {
  return new Promise(function (resolve) {
    //创建XMLHttpRequest对象
    const xhr = new XMLHttpRequest();
    //设置请求
    xhr.open('GET', url);
    //发送请求
    xhr.send();
    //通过xhr的一个事件监听来获取请求的响应状态和数据
    xhr.onreadystatechange = function () {
      //readyState这个状态会从0逐渐变化到4 如果变到了4说明请求响应成功了
      if (xhr.readyState === 4) {
        //说明请求数据成功了 可以将当前的Promise修改为成功态 并且存储数据
        resolve(xhr.response);
      }
    };
  });
}

//  =================1,发送请求,获取所有的英雄数据,将数据渲染到页面================
async function fn() {
  const res = await getDate('http://project.x-zd.net:3001/apis/herolist');
  // console.log(res,'res')

  //转成js对象,获取所有的英雄的数组
  const heroArr = JSON.parse(res).data.reverse();
  // console.log(heroArr,'heroArr')

  //调用渲染方法,将数据渲染到页面
  displayHero(heroArr);

  //编写渲染数据到页面的方法
  function displayHero(arr) {
    //获取外层的容器
    const ul = document.querySelector('.list');

    // //还需要在填充数据之前对容器中的内容做一个清空
    // ul.innerHTML = '';

    // //遍历数组
    // arr.forEach((item) => {
    //   // console.log(item)

    //   //将js对象转成dom结构的元素填充到list中
    //   ul.innerHTML += `<li>
    //                           <a href="https://pvp.qq.com/web201605/herodetail/${item.ename}.shtml" target="_blank">
    //                                 <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/${item.ename}/${item.ename}.jpg"/>
    //                                 <span>${item.cname}</span>
    //                           </a>
    //                         </li>`;
    // });

    //改进:使用数组的map方法,先将元素转成dom字符串,然后使用join方法将数组元素拼接成一整个字符串,最后填充到容器中
    ul.innerHTML = arr.map(item=>{
      return `<li>
                 <a href="https://pvp.qq.com/web201605/herodetail/${item.ename}.shtml" target="_blank">
                       <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/${item.ename}/${item.ename}.jpg"/>
                       <span>${item.cname}</span>
                 </a>
               </li>`
   }).join('')
  //  console.log(ul,'ul')

  }

  // ============2,实现页面上层区域自定义单选框的单选效果(点击哪一个单选框就选中,剩余的取消选中)========

  //获取所有的自定义选框
  const radios = document.querySelectorAll('.radio');

  //遍历获取每一个自定义单选框
  radios.forEach(function (radio) {
    //添加点击事件
    radio.addEventListener('click', function () {
      // //实现单选效果:当前点击的元素选中,剩余取消选中
      // //使用排他思想:先清除所有radio的样式
      // radios.forEach((item) => item.classList.remove('checked'));
      // //在给当前点击的radio添加样式
      // radio.classList.add('checked');
      setRadioStyle(radio)

      //  ====================3,实现页面上层区域自定义单选框的数据筛选(根据选中的单选框,筛选下方的英雄数据)=======
      //获取单选框radio上的自定义属性的值
      // console.log(radio,'radio')
      const type = radio.dataset.type;
      const value = radio.dataset.value;
      console.log(type, 'type');
      console.log(value, 'value');

      //根据type值的不同,过滤heroArr中的数据
      let filterArr;
      if (type == 'all') {
        filterArr = heroArr;
      } else if (type == 'pay_type') {
        filterArr = heroArr.filter((item) => item.pay_type == value);
      } else if (type == 'hero_type') {
        //因为有的英雄同时有两种角色:赵云.既是战士,又是刺客
        filterArr = heroArr.filter(
          (item) => item.hero_type == value || item.hero_type2 == value
        );
      }
      //将过滤后的数据重新渲染到页面
      displayHero(filterArr);
    });
  });

  //编写实现自定义单选框单选效果的方法
  function setRadioStyle(element){//element代表当前点击的那个单选框(事件源对象)
    //先拿到之前选中的单选框
    const preRadio = document.querySelector('.radio.checked') //必须要使用交集选择器,中间不能有空格

    //去掉之前选中的单选框的样式
    if(preRadio){
      preRadio.classList.remove('checked')
    }

    //在给当前点击的单选框设置样式
    element.classList.add('checked')
  }

  // ==================4,实现页面上层区域搜索框的搜索功能================== 
  //获取搜索框
  const input = document.querySelector('.input input')

  //添加事件
  //change:在元素失去焦点的时候才触发 input:元素的值只要发生改变就立即触发
  input.addEventListener('input',function(){
    //首先获取文本框中输入的内容
    const value = input.value
    //到heroArr中查找 英雄的名称中有没有包含这个字符串的 数据
    // 使用filter方法过滤英雄数组heroArr
    // 检查每个英雄的cname(中文名)是否包含输入框中的value值
    // 如果包含，则保留该英雄数据
    const heros = heroArr.filter(item => item.cname.includes(value))
    // console.log(heros,'heros')
    displayHero(heros)

    //实现高亮效果:获取ul容器中标签体的内容,将包含关键字的文本进行替换
    const ul = document.querySelector('.list')
    // 获取ul容器中的所有HTML内容
    // 使用replaceAll方法将内容中所有匹配value的文本替换为带有红色样式的span标签
    // 这样就能实现搜索关键词的高亮显示效果
    const content = ul.innerHTML.replaceAll(value,`<span style='color:red'>${value}</span>`)
    ul.innerHTML = content

    //如果没有输入数据,或者输入空格,仍然显示所有数据
    if(!value.trim()){
      displayHero(heroArr)
    }

    // //在次使用排他思想:取消所有单选框的选中状态,将全部单选框设置为选中状态
    // radios.forEach(item => item.classList.remove('checked'))
    // document.querySelector('.radio[data-type=all]').classList.add('checked')

    //调用上面写好的设置单选的方法,设置全选按钮选中
    setRadioStyle(document.querySelector('.radio[data-type=all]'))
  })
}

fn();
